<template>
  <div class="shop-manage">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-row>
        <el-form-item label="店铺名称">
          <el-input v-model="formInline.shopName" placeholder="输入店铺名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="formInline.name" placeholder="输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品ID">
          <el-input v-model="formInline.id" placeholder="输入商品ID" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="formInline.startDate" type="date" placeholder="开始时间" clearable></el-date-picker>
          <el-date-picker v-model="formInline.endDate" type="date" placeholder="结束时间" clearable></el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="商品状态" clearable>
            <el-option label="在售" :value="1"></el-option>
            <el-option label="下架" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchGoods">搜索</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="showEdit">新增</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table
      :data="list"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="80">
      </el-table-column>
      <el-table-column
        prop="shopName"
        label="店铺名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="_price"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="_deposit"
        label="押金">
      </el-table-column>
      <el-table-column
        prop="description"
        label="商品描述">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.status === 0">草稿</el-tag>
          <el-tag type="success" v-if="scope.row.status === 1">上架</el-tag>
          <el-tag type="info" v-if="scope.row.status === 2">下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-popconfirm
            :title="`确定${scope.row.status === 1 ? '下' : '上'}架吗?`"
            @onConfirm="updateStatus(scope.row)"
          >
          <el-button type="text" slot="reference" size="small">{{scope.row.status === 1 ? '下架' : '上架'}}</el-button>
          </el-popconfirm>
          <el-button type="text" slot="reference" size="small" @click="showEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      :page-size="payload.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      @current-change="onPageChange"
      @size-change="handleSizeChange"
      layout="sizes, prev, pager, next"
      :total="payload.total">
    </el-pagination>
    <edit-goods ref="editGoods" @close="searchGoods"></edit-goods>
  </div>
</template>

<script>
import EditGoods from './EditGoods'
import numeral from 'numeral'

export default {
  name: 'GoodsManage',
  components: {
    EditGoods
  },
  data () {
    return {
      loading: true,
      isShowEdit: false,
      formInline: {
        name: '',
        startDate: '',
        endDate: '',
        status: null
      },
      payload: {
        current: 1,
        pageSize: 10,
        total: 10
      },
      list: []
    }
  },
  methods: {
    searchGoods () {
      this.payload.current = 1
      this.getGoodsList()
    },
    getGoodsList () {
      this.loading = true
      // const shopInfo = JSON.parse(localStorage.getItem('shopInfo'))

      let query = {
        ...this.formInline
      }
      this.$http.post(`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/manager/goods/list`, {
        query,
        form: {},
        pagination: {
          current: this.payload.current,
          pageSize: this.payload.pageSize
        }
      }).then(res => {
        if (res.body.code === 200) {
          res.body.body.map(item => {
            item._price = numeral(item.price || 0).divide(100).format('0.00')
            item._shippingFee = numeral(item.shippingFee || 0).divide(100).format('0,0.00')
            item._deposit = numeral(item.deposit || 0).divide(100).format('0.00')
            item.createTime = item.createTime.split('.')[0]
          })
          this.list = res.body.body
          this.payload.total = res.body.total
        } else {
          this.$message({
            message: '获取数据失败',
            type: 'warning'
          })
        }
      }).catch(err => {
        console.error(err)
      }).finally(() => {
        setTimeout(() => { this.loading = false }, 400)
      })
    },
    onPageChange (current) {
      this.payload.current = current
      this.getGoodsList()
    },
    handleSizeChange (size) {
      this.payload.pageSize = size
      this.getGoodsList()
    },
    updateStatus (item) {
      const loading = this.$loading()
      this.$http.post(`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/goods/updateStatus`, {
        query: {
          id: item.id,
          status: item.status === 1 ? 2 : 1
        },
        pagination: {},
        form: {
        }
      }).then(() => {
        item.status = item.status === 1 ? 2 : 1
        this.$message.success(status === 1 ? '上架成功' : '下架成功')
      }).catch().finally(() => {
        setTimeout(() => loading.close(), 1000)
      })
    },
    showEdit (item) {
      var _item = this._.cloneDeep(item)
      if (item) {
        _item.price = numeral(_item.price || 0).divide(100).value()
        _item.deposit = numeral(_item.deposit || 0).divide(100).value()
        _item.shippingFee = numeral(_item.shippingFee || 0).divide(100).value()
      }
      this.$refs.editGoods.show(_item)
    }
  },
  mounted () {
    this.getGoodsList()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.col {
  display: flex;
  span {
    flex-shrink: 0;
    padding-right: 20px;
    line-height: 40px;
  }
}
.pagination {
  padding-top: 30px;
  margin-left: auto;
  display: table;
}
</style>
